<template>
  <div :key="$route.path">
    <div class="main-box main-boxa">
      <HeadTitle :title="title"/>
      <div class="tabs-content tabs-a-con" data-tabs-content='tabs1'>
        <div class="tabs-panel is-active" id="par1">
          <ul class="channel">
            <li v-for="(info, index) in infoList" :key="index">
              <a :href="info.url">{{info.name}}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import HeadTitle from '../../components/HeadTitle/HeadTitle';
  import {reqChannel, reqLinks} from '../../api/index'
  import commonJs from '../../assets/js/commonJs'

  export default {
    name: "InfoList",
    components: {
      HeadTitle
    },
    data() {
      return {
        title: '',
        infoList: []
      }
    },
    methods: {
      async create() {
        let {path} = this.$route;
        if (path.indexOf('channel') > -1) {
          this.title = '学生频道';
          // 加载学生频道的数据
          let result = await commonJs.openAjax(reqChannel(), true, true);
          if (result.code == 0) {
            this.infoList = result.data;
          }
        } else if (path.indexOf('links') > -1) {
          this.title = '特别链接';
          // 加载特别链接的数据
          let result = await commonJs.openAjax(reqLinks(), true, true);
          if (result.code == 0) {
            this.infoList = result.data;
          }
        }
      }
    },
    mounted() {
      this.create();
    },
    watch: {
      //添加路由变化时，页面初始到方法
      '$route'(to, from) {
        this.create();
      }
    },
  }
</script>

<style scoped>

</style>
